<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learnAjax</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    用户名：<input type="text" name="username" id="username"><br>
    密码：<input type="password" name="password" id="password">
    <button id='btn'>提交</button>
    <script>
        // // 创建XHR对象
        // var xhr = new XMLHttpRequest();
        // // 打开连接
        // // send方法在路径里传参
        // xhr.open("get", "http://127.0.0.1:5500/%E5%B0%9A%E5%AD%A6%E5%A0%82%E7%BB%83%E4%B9%A0/%E6%B1%AA%E8%80%81%E5%B8%88/JS%E5%AD%A6%E4%B9%A0/text.json", true);
        // // post发送请求要设置请求头，且到send方法里传参
        // // xhr.open('post', 'http://192.168.18.139:8888/test/hello', true);
        // // xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
        // // 发送请求
        // xhr.send();
        // // xhr.send('username=zhangsan&password=12345');
        // // 设置超时时间
        // xhr.timeout = 1000;
        // // 超时调用函数
        // xhr.ontimeout = function () {
        //     alert("请求超时");
        // }
        // xhr.onreadystatechange = function () {
        //     // console.log(xhr.readyState);
        //     // 接收响应
        //     if (xhr.readyState == 4 && xhr.status == 200) {
        //         var dataJson = JSON.parse(xhr.responseText);
        //         console.log(dataJson);
        //         var ul = document.createElement('ul');
        //         dataJson.data.forEach(val => {
        //             var li = document.createElement('li');
        //             li.innerHTML = `name:${val.name},age${val.age}`;
        //             ul.appendChild(li);
        //             document.body.appendChild(ul);
        //         });
        //     }
        // }


        // 封装Ajax
        var $ = {
            xhr: new XMLHttpRequest(),
            ajax: function (obj) {
                // var xhr = new XMLHttpRequest();
                var that = this.xhr;
                if (obj.type.toLowerCase() == 'get') {
                    if (obj.data != '') {
                        that.open(obj.type, obj.url + '?' + obj.data, obj.async);
                    } else {
                        that.open(obj.type, obj.url, obj.async);
                    }
                    that.send();
                } else if (obj.type.toLowerCase() == 'post') {
                    that.open(obj.type, obj.url, obj.async);
                    that.send(obj.data);
                }
                that.timeout = 3000;
                // that.ontimeout = function () {
                //     obj.error("请求超时");
                // }
                that.onreadystatechange = function () {
                    if (that.readyState == 4) {
                        if (that.status == 200) {
                            obj.success(that.responseText);
                        } else if (that.status == 0) {
                            obj.error && obj.error("请求超时");
                        } else {
                            obj.error && obj.error(that.status);
                        }
                    }
                }
            },
            post: function (obj) {
                var that = this.xhr;
                that.open('post', obj.url, true);
                that.send(obj.data);
                that.onreadystatechange = function () {
                    if (that.readyState == 4) {
                        if (that.status == 200) {
                            obj.success(that.responseText);
                        } else if (that.status == 0) {
                            obj.error("请求超时");
                        } else {
                            obj.error(that.status);
                        }
                    }
                }
            },
            get: function (obj) {
                var that = this.xhr;
                that.open('get', obj.url, true);
                that.send();
                that.onreadystatechange = function () {
                    if (that.readyState == 4) {
                        if (that.status == 200) {
                            obj.success(that.responseText);
                        } else if (that.status == 0) {
                            obj.error("请求超时");
                        } else {
                            obj.error(that.status);
                        }
                    }
                }
            }
        }

        $.ajax({
            type: 'GET',
            url: 'http://127.0.0.1:5500/%E5%B0%9A%E5%AD%A6%E5%A0%82%E7%BB%83%E4%B9%A0/%E6%B1%AA%E8%80%81%E5%B8%88/JS%E5%AD%A6%E4%B9%A0/text.json',
            data: "name=luojianming",
            async: 'true',
            success: function (data) {
                console.log(data);
            },
            error: function (res) {
                console.log(res);
                alert(res);
            }
        })
        // $.get({
        //     url: 'http://127.0.0.1:5500/%E5%B0%9A%E5%AD%A6%E5%A0%82%E7%BB%83%E4%B9%A0/%E6%B1%AA%E8%80%81%E5%B8%88/JS%E5%AD%A6%E4%B9%A0/text.json',
        //     success: function (data) {
        //         console.log(data);
        //     },
        //     error: function (res) {
        //         console.log(res);
        //         alert(res);
        //     }
        // })


        // 处理跨域
        // 1.通过jsonp跨域
        // function callback(data) {
        //     alert(data);
        // };
        // var script = document.createElement('script');
        // script.src = 'http://localhost/PHP&&JS/%E5%B0%9A%E5%AD%A6%E5%A0%82%E7%BB%83%E4%B9%A0/%E6%B1%AA%E8%80%81%E5%B8%88/JS%E5%AD%A6%E4%B9%A0/test.php?cb=callback';
        // window.onload = function () {
        //     document.body.appendChild(script);
        // }


        // window.btn.onclick = function () {
        //     var username = window.username.value;
        //     var password = window.password.value;
        //     // jquery中封装的ajax方法
        //     $.ajax({
        //         type: 'get',
        //         url: 'http://8.129.235.230//JS%E5%AD%A6%E4%B9%A0/test2.php',
        //         // data: 'username=' + username + '&password=' + password,
        //         data: {
        //             username: username,
        //             password: password
        //         },
        //         async: 'true',
        //         success: function (data) {
        //             data = JSON.parse(data);
        //             console.log(data);
        //             alert(data);
        //         },
        //         error: function (res) {
        //             console.log(res);
        //         },
        //         beforeSend: function () {
        //             alert('请求发送中》》》');
        //         },
        //         complete: function () {
        //             alert('请求完成！');
        //         }
        //     })
        // }

    </script>
</body>

</html>